<script setup lang="ts">
import { onMounted } from 'vue'

// 在页面加载完成后执行初始化地图和相关操作
onMounted(() => {
    // 创建地图实例并初始化
    const map = new BMapGL.Map("cesiumContainer");
    map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 19);
    map.enableScrollWheelZoom(true);
    map.setHeading(64.5);
    map.setTilt(73);
    
    // 绑定地图点击事件
    map.addEventListener('click', handleMapClick);
    
    // 初始化城市定位
    initCityLocation(map);
});

// 处理地图点击事件
function handleMapClick(e: any) {
    const { lat, lng } = e.latlng;
    // 创建地理编码实例
    const myGeo = new BMapGL.Geocoder();
    // 根据坐标获取地址描述
    myGeo.getLocation(new BMapGL.Point(lng, lat), function(result: any) {
        if (result) {
            alert(` 经度：${lat}\n 维度:${lng} \n 地址 ${result.address}`);
        }
    });
}

// 初始化城市定位
function initCityLocation(map: any) {
    const myCity = new BMapGL.LocalCity();
    myCity.get(function(result: any) {
        const cityName = result.name;
        map.setCenter(cityName);
        alert(`当前定位城市:${cityName}\n 经度：${result.center?.lat}\n 纬度：${result.center?.lng}`);
    });
}
</script>

<template>
  <div id="cesiumContainer" style="height: 100vh;width: 100vw;"/>
</template>

<style scoped>
#cesiumContainer {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
